<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin:10px;
			animation-name: move;
			animation-duration: 5s;
			animation-iteration-count: infinite;
		}
		div:first-child{
			animation-timing-function: ease;
		}
		div:nth-child(2){
			animation-timing-function: ease-in;
		}
		div:nth-child(3){
			animation-timing-function: ease-out;
		}
		div:nth-child(4){
			animation-timing-function: ease-in-out;
		}
		div:last-child{
			animation-timing-function: linear;
		}

		@keyframes move{
			from{
				margin-left: 0px;
				background-color: red;
			}
			to{
				margin-left: 500px;
				background-color: blue;
			}
		}

	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>



